<template>
	<div class="ticket-container">
		<!-- 顶部标题 -->
		<div class="header">
			<!-- <h1>我的水票</h1> -->
			<p>管理您的水票，随时查看使用状态</p>
		</div>

		<!-- 选项卡 -->
		<div class="tabs">
			<div class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
				全部
			</div>
			<div class="tab-item" :class="{ active: activeTab === 'remaining' }" @click="switchTab('remaining')">
				待使用
			</div>
			<div class="tab-item" :class="{ active: activeTab === 'used' }" @click="switchTab('used')">
				已用完
			</div>
		</div>

		<!-- 加载状态 -->
		<div v-if="loading" class="loading">
			<span>
				<icon type="waiting" size="26" />
			</span>
		</div>

		<!-- 水票列表 -->
		<div class="ticket-list" v-else>
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" :show-scrollbar="false" v-if="tickets.length!=0">
				<div class="ticket-item" v-for="(ticket, index) in tickets" :key="index">
					<image :src="ticket.img" mode=""></image>
					<div class="ticket-info">
						<div class="ticket-header">
							<h3>{{ ticket.name }}</h3>
							<span class="status-badge"
								:class="{  'remaining' :ticket.remaining > 0,'used':ticket.remaining < 0 || ticket.remaining == 0  }">
								{{ ticketStatusText(ticket) }}
							</span>
						</div>

						<div class="ticket-details">
							<div class="detail-item">
								<!-- <span class="label">总数量:</span>
							<span class="value">{{ ticket.total }} 桶</span> -->
								<span class="label">剩余:</span>
								<span class="value highlight">{{ ticket.remaining }} 桶</span>
							</div>

							<div class="detail-item">
								<span class="label">门店:</span>
								<span class="value">{{ ticket.store }}</span>
							</div>
						</div>
					</div>

					<div class="ticket-actions">
						<view class="btn-exchange"
							@click.stop="navigateTo(`/pages/shop/GoodsCon/index?id=${ticket.productId}`)"
							v-if="ticket.remaining > 0">
							水票换购
						</view>
						<button class="btn-detail" @click="editTicket(ticket)">
							详情
						</button>
					</div>
				</div>
			</scroll-view>

			<!-- 无数据提示 -->
			<div class="empty-tip" v-if="tickets.length == 0">
				<div class="empty-icon">💧</div>
				<p>暂无{{tabText}}水票</p>
				<button class="btn-add" @click="navigateTo('/pages/shop/GoodsList/index?s=水票')">添加水票</button>
			</div>
		</div>

		<!-- 水票详情/编辑弹窗 -->
		<div class="modal" v-if="showModal">
			<div class="modal-content">
				<div class="modal-header">
					<h2>{{ isEditMode ? '水票详情' : '添加水票' }}</h2>
					<view class="close-btn" @click="showModal = false">&times;</view>
				</div>

				<div class="form-group">
					<label>水票名称:{{currentTicket.name}}</label>

				</div>
				<div class="form-group">
					<label>剩余（桶）：{{currentTicket.remaining}}</label>

				</div>
				<div class="form-group">
					<label>门店：{{currentTicket.store}}</label>

				</div>
				<div class="form-actions">
					<view class="btn-cancel" @click="showModal = false">取消</view>
					<!-- <button class="btn-confirm" @click="saveTicket">确认保存</button> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getWaterTicketOrder
	} from '@/api/ticket'
	export default {
		name: 'TicketManager',
		data() {
			return {
				activeTab: 'all',
				loading: false,
				showModal: false,
				isEditMode: false,
				currentTicket: {
					id: null,
					name: '',
					total: 0,
					store: '',
				},
				tickets: [],
				pages: {
					page: 1,
					limit: 10
				}
			};
		},
		computed: {
			tabText() {
				return {
					'all': '',
					'remaining': '待使用',
					'used': '已用完'
				} [this.activeTab];
			}
		},

		onShow() {
			this.init();
			this.fetchTickets();
		},
		methods: {
			// 获取水票数据
			async fetchTickets() {
				this.loading = true;
				let status = this.activeTab == 'all' ? '' : this.activeTab == 'remaining' ? 1 : 2
				// 模拟API调用
				try {
					let res = await getWaterTicketOrder(status, this.pages.page, this.pages.limit)
					this.loading = false;
					if (res.status == 200) {
						if (this.pages.page == 1) {
							this.tickets = []
						}
						let arr = res.data.map((it) => {
							return {
								id: it.id,
								name: it.productInfo.storeName,
								remaining: it.availableNum,
								total: it.totalNum,
								used: 0,
								store: it.storeInfo.name,
								addedDate: '2025-08-15',
								img: it.productInfo.image,
								productId: it.productInfo.id
							}
						})
						this.tickets = this.tickets.concat(arr)
					}
				} catch (e) {
					this.loading = false;
					console.log(e, 'eeeee')
				}
			},

			// 切换选项卡
			async switchTab(tab) {
				this.init()
				this.activeTab = tab;
				// 模拟API调用
				this.fetchTickets();
			},
			init() {
				this.pages = {
					page: 1,
					limit: 10
				}
			},
			ticketStatusText(ticket) {
				return ticket.remaining > 0 ? '待使用' : '已用完';
			},

			ticketStatusClass(ticket) {
				return ticket.remaining > 0 ? 'remaining' : 'used';
			},

			// 编辑水票
			editTicket(ticket) {
				this.currentTicket = {
					id: ticket.id,
					name: ticket.name,
					total: ticket.total,
					store: ticket.store,
					remaining: ticket.remaining
				};
				this.isEditMode = true;
				this.showModal = true;
			},

			// 保存水票（添加或编辑）
			saveTicket() {
				if (!this.currentTicket.name || !this.currentTicket.total || !this.currentTicket.store) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				this.showModal = false;
			},
			lower() {
				console.log('daodi')
				this.pages.page++
			},
			navigateTo(url) {

				// 其他页面跳转
				uni.navigateTo({
					url: url
				});

			}
		}
	};
</script>

<style lang="less" scoped>
	.ticket-container {
		max-width: 750rpx;
		margin: 0 auto;
		padding: 40rpx;
	}

	/* 头部样式 */
	.header {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.header h1 {
		font-size: 48rpx;
		color: #2c3e50;
		margin-bottom: 16rpx;
	}

	.header p {
		font-size: 28rpx;
		color: #7f8c8d;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #7f8c8d;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		color: #3498db;
		font-weight: bold;
		background-color: #f8f9fa;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 50%;
		height: 6rpx;
		background-color: #3498db;
		border-radius: 6rpx;
	}

	.loading {
		text-align: center;
		padding: 80rpx 0;
	}

	/* 水票列表样式 */
	.ticket-list {
		margin-bottom: 40rpx;

		::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}
	}

	.scroll-Y {
		height: 80vh;
	}

	.ticket-item {
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		image {
			width: 160rpx;
			height: 160rpx;
			object-fit: cover;
			border-radius: 12rpx;
		}
	}

	.ticket-info {
		margin-left: 8rpx;
	}

	.ticket-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.ticket-header h3 {
		font-size: 32rpx;
		color: #2c3e50;
		margin-right: 20rpx;
		width: 310rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 设置内容方向为垂直 */
		-webkit-line-clamp: 3;
		/* 设置最多显示 3 行 */
		overflow: hidden;
	}

	.status-badge {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}

	.status-badge.remaining {
		background-color: #e8f4fc;
		color: #3498db;
	}

	.status-badge.used {
		background-color: #f0f0f0;
		color: #95a5a6;
	}

	.ticket-details {
		display: grid;
		// grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
		font-size: 26rpx;
	}

	.detail-item {
		display: flex;
	}

	.label {
		color: #7f8c8d;
		min-width: 80rpx;
		margin-right: 10rpx;
	}

	.value {
		color: #2c3e50;
		font-weight: 500;
	}

	.value.highlight {
		color: #3498db;
		font-weight: bold;
	}

	/* 操作按钮样式 */
	.ticket-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		min-width: 200rpx;
		position: absolute;
		right: -20rpx;
		bottom: 24rpx;
	}

	.btn-exchange,
	.btn-detail {
		// padding: 6px 12px;
		border-radius: 12rpx;
		font-size: 26rpx;
		border: none;
		cursor: pointer;
		transition: all 0.2s;
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.btn-exchange {
		background-color: #3498db;
		color: white;
	}

	.btn-exchange:hover {
		background-color: #2980b9;
	}

	.btn-detail {
		background-color: #f0f0f0;
		color: #7f8c8d;
	}

	.btn-detail:hover {
		background-color: #e0e0e0;
	}

	/* 空状态样式 */
	.empty-tip {
		text-align: center;
		padding: 60rpx 40rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.empty-icon {
		font-size: 96rpx;
		margin-bottom: 30rpx;
		color: #bdc3c7;
	}

	.empty-tip p {
		color: #7f8c8d;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}

	.btn-add {
		padding: 16rpx 40rpx;
		background-color: #3498db;
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.btn-add:hover {
		background-color: #2980b9;
	}

	/* 弹窗样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 32rpx;
		width: 90%;
		max-width: 800rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		position: relative;
	}

	.modal-header h2 {
		font-size: 36rpx;
		color: #2c3e50;
	}

	.close-btn {
		background: none;
		border: none;
		font-size: 48rpx;
		color: #95a5a6;
		cursor: pointer;
		transition: color 0.2s;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 20rpx;
	}

	.close-btn:hover {
		color: #e74c3c;
	}

	.form-group {
		margin-bottom: 30rpx;
	}

	.form-group label {
		display: block;
		margin-bottom: 12rpx;
		color: #2c3e50;
		font-weight: 500;
		font-size: 28rpx;
	}

	.form-group input {
		width: 100%;
		padding: 0rpx 24rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 16rpx;
		font-size: 28rpx;
		transition: border-color 0.3s;
	}

	.form-group input:focus {
		border-color: #3498db;
		outline: none;
		box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 24rpx;
		margin-top: 40rpx;
	}

	.btn-cancel,
	.btn-confirm {
		padding: 16rpx 40rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		border: none;
		cursor: pointer;
		transition: all 0.2s;
	}

	.btn-cancel {
		background-color: #f0f0f0;
		color: #7f8c8d;
	}

	.btn-cancel:hover {
		background-color: #e0e0e0;
	}

	.btn-confirm {
		background-color: #3498db;
		color: white;
	}

	.btn-confirm:hover {
		background-color: #2980b9;
	}
</style>